<template>
  <view class="ai-render">
    <view  v-if="chatItemLoading" class="loading-tag">
      <uni-icons type="spinner-cycle" size="18" color="#1678FF" class="spin-icon" /> 
      <text class="tag-text" v-if="chatItemLoading">{{ process }}</text>
    </view>
    <view class="message-container">
      <view class="ai-message" v-if="messageText">
        <ua-markdown :source="messageText" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      content: {
        default: {
          content: '',
          process: '',
          think: '',
          chatItemLoading: false
        }
      }
    },
    computed: {
      messageText() {
        return (this.content?.content || '').trim();
      },
      process() {
        return this.content?.process || '';
      },
      think() {
        return this.content?.think || '';
      },
      chatItemLoading() {
        return this.content?.chatItemLoading;
      }
    },
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="scss" scoped>
  .ai-render {
    margin-bottom: 20rpx * 2;
    max-width: 100%;
    .ai-message {
      max-width: 100%;
      padding: 14rpx 20rpx;
      background: #fff;
      border-radius: 16rpx;
      border-bottom-left-radius: 0rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }
  }

  .loading-tag {
    // margin-top: 20rpx;
    margin-bottom: 20rpx;
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0rpx 20rpx 0rpx 12rpx;
    background: #eaf5ff;
    border-color: #7caff5;
    border: 1rpx solid #c4c4c4;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: #1678ff;

    .spin-icon {
      margin-right: 4px;
      animation: spin 3s linear infinite;
    }

    .tag-text {
      line-height: 1;
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
